<template>
	<view class="content">
		<view class="bg-contain">
			<input  type="text" v-model="nickName" placeholder="请输入昵称"/>
		</view>
		<view class="btnGroup">
			<view class="btn showBtnBackColor" @click="btnAddAddr">
				保存
			</view>
		</view>
<!-- 		<view id="test">
				
				<view>
					<view class="topImg">
						<image style="height: 150px; width:120px;" src="http://dl.hgtplat.com/banjo/picture/Fplaceholder1.png"></image>
					    <view class="btnAdd" @click="addShoppingCard">
					    	保存
					    </view>
					</view>
					
				
					<view class="flex">
						<view :animation="animationY" :style="'position:fixed;top:' + ballY + 'px;'" v-if="showBall">
							<view class="ball" :animation="animationX" :style="'position:fixed;left:' + ballX + 'px;'"></view>
						</view>
					</view>
						
				</view>
			</view> -->
	</view>
</template>

<script>
import {uesrEdit} from '../../api/index.js'
export default {
	data() {
		return {
			rightListSum: [
				{
					showDel: false,
					delAnimation: false, // 删除动画
					sum: 0,
				}
			],
			nickName:'',
			showShoppingCart: true, // 购物车显示
			shoppingCartAnimation: false, // 购物车动画
			showBall: false, // 小球是否显示
			animationY: '', // 动画Y
			animationX: '', // 动画X
			ballY: '', // 小球当前位置Y
			ballX: '', // 小球当前位置X
			userId:undefined,
			curListIndex: 0,
			mainCur: 0,
			listHeight: [], // 左边列表高度
			scrollY: ''
		}
	},
	onLoad(option) {
		this.userId = getApp().globalData.userId
	},
	methods: {
		btnAddAddr(){
			if (this.nickName.trim() == '') {
				
			    uni.showToast({
			    	icon:'none',
					title:'请输入昵称！'
			    })
				
			}else{
				
				
				
				this.getMyCouponList(this.nickName);
				
			}
		},
		async getMyCouponList(nickName) {
			    try {
					let {result} = await uesrEdit({
						nickName:nickName,
						id:this.userId,
					});
				   uni.showToast({
				   	icon:'success',
					title:'保存昵称成功！'
				   },1500)
				   
				   setTimeout(()=>{
					   uni.navigateBack({
					   	delta:1
					   })
				   },1500)
				   
				
				} catch (err) {
					// console.log('zjk:', err);
				}
				
				
			
		},
		// 添加购物车
		addShoppingCard(e){
			// x, y表示手指点击横纵坐标, 即小球的起始坐标
			let ballX = e.detail.x,
				ballY = e.detail.y;
			this.createAnimation(ballX, ballY);
		},
		// 延迟执行
		setDelayTime(sec) {
			return new Promise((resolve, reject) => {
				setTimeout(() => {resolve()}, sec)
			});
		},
		// 创建动画
		createAnimation(ballX, ballY) {
			uni.getSystemInfo({
				success: async (e) => {
					// var bottomX = e.windowWidth; // 结束位置X
					var bottomX = 50; // 结束位置X
					var bottomY = e.windowHeight - 50; // 结束位置Y
					var animationX = this.flyX(bottomX, ballX); // 创建小球水平动画
					var animationY = this.flyY(bottomY, ballY); // 创建小球垂直动画
					this.ballX = ballX; // 小球当前位置X
					this.ballY = ballY; // 小球当前位置Y
					this.showBall = true; // 显示小球
					
					this.setDelayTime(100).then(() => {
						this.animationX = animationX.export(); // 执行动画X
						this.animationY = animationY.export(); // 执行动画Y
						// 400ms延时, 即小球的抛物线时长
						return this.setDelayTime(400);
					}).then(() => {
						this.animationX = this.flyX(0, 0, 0).export(); // 执行动画X
						this.animationY = this.flyY(0, 0, 0).export(); // 执行动画Y
						this.showBall = false; // 隐藏小球
						this.shoppingCartAnimation =  true // 购物车动画
						// 400ms延时, 即小球的抛物线时长
						return this.setDelayTime(400);
					}).then(() => {
						this.shoppingCartAnimation =  false // 购物车动画
					})
					
				}
			})
		},
		// 水平动画
		flyX(bottomX, ballX, duration) {
			/**
			 * bottomX 结束位置
			 * ballX 开始位置
			 * duration 动画持续时间
			 */
			let animation = uni.createAnimation({
				duration: duration || 400,
				timingFunction: 'linear',
			})
			animation.translateX(bottomX-ballX).step(); // 动画效果
			return animation;
		},
		// 垂直动画
		flyY(bottomY, ballY, duration) {
			/**
			 * bottomY 结束位置
			 * ballY 开始位置
			 * duration 动画持续时间
			 */
			let animation = uni.createAnimation({
				duration: duration || 400,
				timingFunction: 'ease-in',
			})
			console.log(bottomY)
			animation.translateY(bottomY-ballY).step(); // 动画效果
			return animation;
		}
	}
}
</script>

<style lang="less">
page{
	height: 100%;
	background-color: #f2f2f2;
}
.bg-contain {
	background-color: #fff;
	padding: 10rpx 0;
	padding-left: 10rpx;
	
}
.bg-contain input{
	color: #333333;
	font-size: 30rpx;
	margin-left: 10upx;
	width: 710rpx;
	height: 60rpx;
}
.btnGroup{
   position: fixed;
   bottom: 0;
   left: 0;
   width: 750rpx;
   // height: 160rpx;
   padding-bottom: 30rpx;
   background-color: #fff;
   .btn{
	   color: #fff;
	   // background-color: #dd524d;
	   height: 100rpx;
	   line-height: 100rpx;
	   border-radius: 50rpx;
	   margin: 20rpx 40rpx 0;
	   font-size: 32rpx;
	   text-align: center;
	   
   }
   
}
.btnBottom{
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}
.topImg{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
}
.btnAdd{
	width: 100rpx;
	height: 60rpx;
}
.flex{
	display: flex;
}

.true {
	border: 8px solid red;
}
.false {
	border: 2px solid #ccc;
}
.item {
  width:50px;
  height: 50px;
  border-radius: 100%;
}
/* 购物车动画 */
.shoppingCartAnimations {
	animation: shoppingCartAnimation 1s;
}
@keyframes shoppingCartAnimation {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }
 
    20% {
        transform: scale3d(1.1,1.1,1.1)
    }
 
    40% {
        transform: scale3d(.9,.9,.9)
    }
 
    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }
 
    80% {
        transform: scale3d(.97,.97,.97)
    }
 
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}
 
.but {
	margin: 10px;
	height: 60px;
	width: 80px;
	display: flex;
}
 
.ball {
	height: 30px;
	width: 30px;
	background: #FF1493;
	border-radius: 50%;
	position: fixed;
}
 
/* 从右到左 */
.delRightShoppingCardAnimations {
	animation: delRightShoppingCardAnimation .5s;
}
@keyframes delRightShoppingCardAnimation {
	from {
		transform: translateX(100px) rotate(900deg);
		animation-timing-function: linear;
	}
	to {
	    transform: translateX(0px) rotate(0);
		
	}
}
/* 从左到右 */
.delLeftShoppingCardAnimations {
	animation: delLeftShoppingCardAnimation .5s;
}
@keyframes delLeftShoppingCardAnimation {
	from {
		transform: translateX(0px) rotate(0);
	}
	to {
	    transform: translateX(100px) rotate(900deg);
	    animation-timing-function: linear;
	}
}
</style>
